<template>
	<view class="pageRoot">
		<view class="w-100 pageHeader px-3">
			<navbar bg="rgba(0,0,0,0)" title="确认订单"></navbar>
			<view class="w-100  bc-fff br-20" style="height: 230rpx;margin-top: 100rpx;">
				<view class="w-100  overflow-hidden tabNav con-between position-relative">
					<view class="w-33 con-center2" :class="tabNavActive==d?'tc-333':'tc-fff'" @click="tabNavActive=d"
						style="height: 76rpx;z-index: 5;" v-for="(d,i) in tabNavArr" :key="d">
						{{d}}
					</view>
					<view class="activeSty  overflow-hidden">
						<view :style="activeSty1" class="activeStyItem">

						</view>
						<view :style="activeSty2" class="activeStyItem">

						</view>
					</view>

				</view>
				<view class="w-100 px-3 con-between" style="margin-top: 36rpx;">
					<view class="w-90 ">
						<view class="w-100 u-line">
							凯丽大厦西座3101
						</view>
						<view class="w-100 tc-9B9B9B">
							周国兴 <text class="ml-2">18988562230</text>
						</view>

					</view>
					<u-icon name="arrow-right"></u-icon>

				</view>


			</view>
			<view class="w-100 bc-fff  br-20" style="margin-top: 30rpx;padding: 22rpx 20rpx;">
				<view class="w-100 d-flex align-items-center">
					<image src="/static/img/icon/shop.png" mode="aspectFill" style="width: 30rpx;height: 30rpx;">
					</image>
					<text class="fz-30 ml-2 fw-bd">每一天便利超市（科技路店）</text>
				</view>
				<view class="mt-2 w-100">
					<view class="w-100 mt-2 con-between" v-for="(d,i) in shoppingCartData" v-show="i<1||unfold">
						<image src="/static/img/images/goodImage.png" mode="aspectFill"
							style="height: 120rpx;width: 120rpx;"></image>
						<view style="width: calc(100% - 130rpx);height: 120rpx;"
							class="d-flex flex-column justify-content-between">
							<view class="w-100 u-line fz-28 fw-bd">
								{{d.title}}
							</view>
							<view class="w-100 con-between">
								<text>x {{d.count}}</text>
								<text class="fw-bd">
									<text class="fz-24 position-relative"
										style="transform: scale(0.8,0.8);display: inline-block;bottom: -5rpx;">￥</text>
									<text style="font-size: 40rpx;">{{setPrice(d.count,d.price)}}</text>

								</text>

							</view>

						</view>
					</view>
				</view>
				<view class="w-100 mt-2 fz-24 tc-9B9B9B con-center2" @click="unfold=!unfold">
					{{unfold?"收起":"展开更多"}}
					<u-icon name="arrow-right" :style="'transform: rotate('+(unfold?'-90deg':'90deg')+')'"></u-icon>
				</view>
				<view class="w-100" style="margin-top: 92rpx;">
					<view class="w-100 fz-26 d-flex align-items-center">
						<image src="/static/img/icon/shop.png" mode="aspectFill"
							style="width: 30rpx;height: 30rpx;margin-right: 12rpx;">
						</image>
						配送方式 <text class="tc-9B9B9B ml-2 fz-24">{{tabNavActive}}</text>
					</view>
					<view class="w-100 fz-26 con-between" style="margin-top: 26rpx;">
						<view class="">
							<image src="/static/img/icon/shop.png" mode="aspectFill"
								style="width: 30rpx;height: 30rpx;margin-right: 12rpx;">
							</image>
							配送费
						</view>
						<text style="color: #F8222D;" class="fw-bd">+￥0.00</text>

					</view>
					<view class="w-100 fz-26 con-between" style="margin-top: 26rpx;">
						<view class="">
							<image src="/static/img/icon/shop.png" mode="aspectFill"
								style="width: 30rpx;height: 30rpx;margin-right: 12rpx;">
							</image>
							优惠券
						</view>
						<text style="color: #F8222D;" class="fw-bd">-￥20.00</text>
					</view>
					<view class="bb mt-4 w-100">

					</view>
					<view class=" mt-4 w-100 fz-26 d-flex justify-content-end align-items-center">
						<text class="fz-24 tc-9B9B9B">共2件</text>，<text class="fw-bd">已优惠</text><text
							style="color: #F8222D;" class="fw-bd">￥20.00</text> <text class="fw-bd">总计</text>

						<text class="fw-bd" style="color: #F8222D;">
							<text class="fz-24 position-relative"
								style="transform: scale(0.8,0.8);display: inline-block;bottom: -5rpx;">￥</text>
							<text style="font-size: 40rpx;">20.00</text>

						</text>
					</view>


				</view>
			</view>
			<view class="w-100 br-20 bc-fff mt-3 fz-26" style="padding:  30rpx;">
				备注
			</view>
			<u-radio-group class="w-100" >
			<view class="w-100 br-20 bc-fff mt-3 fz-26" style="padding:0  30rpx;">
				
				<view class="w-100 py-3 bb con-between">
					<view class="d-flex align-items-center ">
						<image src="/static/img/icon/yuE.png" mode="aspectFill"
							style="width: 46rpx;height: 40rpx;margin-right: 20rpx;"></image> <text>余额支付</text>
					</view>
					
					<u-radio name="余额" >
					
					</u-radio>
				</view>
				<view class="w-100 py-3 con-between">
					<view class="d-flex align-items-center ">
						<image src="/static/img/icon/WeChatPay.png" mode="aspectFill"
							style="width: 46rpx;height: 40rpx;margin-right: 20rpx;"></image> <text>微信支付</text>
					</view>
					<u-radio name="微信" >

					</u-radio>
				
				</view>
			</view>
			</u-radio-group>
			<view class="w-100 " style="height: 140rpx;">

			</view>

		</view>

	</view>

</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				unfold: false,
				payType: 1,
				yueEPay: true,
				weiXinPay: false,
				activeSty1: {
					width: '66.6%',
					height: '100%',
					backgroundImage: "linear-gradient(-90deg, #013A4B, #237D63)",
					borderRadius: "0rpx 20rpx",
					left: "33.3%",
				},
				activeSty2: {
					width: '0%',
					height: '100%',
				},
				tabNavActive: "同城配送",
				tabNavArr: ["同城配送", "到店自取", "快递发货"],
			}
		},
		computed: {
			...mapState(['shoppingCartData']),
		},
		watch: {
			tabNavActive: function(v) {
				switch (v) {
					case "同城配送":
						this.activeSty1 = {
							width: '66.6%',
							height: '100%',
							backgroundImage: "linear-gradient(-90deg, #013A4B, #237D63)",
							borderRadius: "0rpx 20rpx",
							left: "33.3%",
						};
						this.activeSty2 = {
							width: '0%',
							height: '100%',
						};
						break;
					case "到店自取":
						this.activeSty1 = {
							width: '33%',
							height: '100%',
							backgroundImage: "linear-gradient(-90deg, #013A4B, #237D63)",
							borderRadius: "20rpx 0rpx",
							left: "0%",
						};
						this.activeSty2 = {
							width: '33%',
							height: '100%',
							borderRadius: "0rpx 20rpx",
							backgroundImage: "linear-gradient(-90deg, #013A4B, #237D63)",
							left: "67%",
						};
						break;
					case "快递发货":
						this.activeSty1 = {
							width: '66%',
							height: '100%',
							backgroundImage: "linear-gradient(-90deg, #013A4B, #237D63)",
							left: "0%",
							borderRadius: "20rpx 0rpx",
						};
						this.activeSty2 = {
							width: '0%',
							height: '100%',
							backgroundImage: "linear-gradient(-90deg, #013A4B, #237D63)",
							left: "33%",
						};
						break;

					default:
						break;
				}
			}
		},
		methods: {
			// 根据单价计算总价
			setPrice(num, price) {
				price = num * price;
				price = parseInt(price * 100) / 100;
				price = price.toFixed(2);
				return price
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F0F2F5;
	}

	.activeSty {
		position: absolute;
		left: 0;
		width: 100%;
		top: 0;
		height: 76rpx;

		.activeStyItem {
			position: absolute;
			height: 76rpx;

		}
	}

	.pageHeader {
		background-position: center;
		background-size: auto 100%;
		background-repeat: no-repeat;
		height: 370rpx;
		background-image:linear-gradient(45deg,#A1D9BF,#61B098)
	}
</style>
